<template>
  <div style="background-color: #f7f8fa">
    <van-row>
      <van-col span="5">
        <div>

        </div>
      </van-col>

      <div class="tools">
        <button
            :class="[initIdx === idx ? 'contro-item active' : 'contro-item']"
            v-for="(item,idx) in toolsArr" :key="idx"
            @click="handleTools(item, idx)"><i :class="'iconfont '+item.icon"></i></button>
      </div>

      <van-col span="14">
        <div class="canvas-wrapper" ref="canvas-wrapper">
          <canvas id="canvas" ref="canvas"></canvas>
        </div>
      </van-col>

      <van-col span="5">
        <div class="container-right">
          <span class="right-text">顶点数</span>
          <div style="width: 250px;">
            <van-slider v-model="n" active-color="#ee0a24" class="slider" :min="3" :max="10" bar-height="4px">
              <template #button>
                <div class="slider-button">{{n}}</div>
              </template>
            </van-slider>
          </div>

          <div class="right-button">
            <van-button round type="info" @click="initPolygon" >生成多边形</van-button>
            <van-button round type="info" @click="onDynamic" style="left: 25px">动态规划</van-button>
          </div>

        </div>
      </van-col>
    </van-row>

  </div>
</template>

<script>
import {fabric} from "fabric";
import {dynamic, getData} from "@/api/polygon";
import { Toast } from 'vant'

export default {
  name: 'HomeView',
  mounted() {
    this.initCanvas()
  },
  created() {
  },

  data() {
    return {
      fabricObj: null,
      zoom: window.zoom ? window.zoom : 1,
      type:null,
      initIdx:0,
      radio:'1',
      toolsArr:[
        {name:'eraser', icon:'icon-esc'},
        {name:'undo', icon:'icon-chexiao'},
        {name:'redo', icon:'icon-xiangyou'}
      ],
      currentTool: '',
      state:{
        saveLen: 0,
        delLen: 0,
        operIndex: -1,
        saveOperateList: [],
        deleteOperateList: [],
      },
      lineArr:[],
      pointArr:[],
      lineArrList:[],
      pointArrList:[],
      r:6,
      n:6,
      calculateTemp:'',
      isSelect:0,
      textTemp:'',
    }
  },
  methods: {
    initCanvas() {
      // 初始化canvas

      this.fabricObj = new fabric.Canvas('canvas',{
      })
      this.fabricObj.setWidth(this.$refs["canvas-wrapper"].offsetWidth)
      this.fabricObj.setHeight(this.$refs["canvas-wrapper"].offsetHeight)
      this.fabricObj.preserveObjectStacking = true

      this.fabricObj.on('mouse:dblclick', e => {
        if (e.target == null) {
          // console.log("目标是null")
        } else {
          this.dbClick(e.target)
        }
      })

      this.fabricObj.on('text:editing:entered', e => { // 进入编辑状态时触发
        this.textEditing(e.target)
      })
      this.fabricObj.on('text:editing:exited', e => { // 退出编辑状态时触发
        this.textExit(e.target)
      })
      this.fabricObj.on('text:changed', e => { // 修改文本内容时触发
        this.textChange(e.target)
      })
      this.save()
    },
    initPolygon() {
      if (this.radio === "2") {
        this.createPolygon()
      }
      if (this.radio === "1") {
        this.createPolygonWithData()
      }
    },
    onDynamic() {
      const _this = this
      let objects = _this.fabricObj.getObjects()
      let array = []
      objects.forEach(function (object) {
        array.push(object.item(1).text)
      })
      // console.log("array",array)
      dynamic(array).then(function (resp) {
        _this.delete(resp.data)
      })
    },
    createPolygonWithData() {
      const _this = this
      this.fabricObj.on('mouse:dblclick', e => {
        if (e.target == null) {
          // console.log("目标是null")
        } else {
          this.dbClick(e.target)
        }
      })
      getData(_this.n).then(function (resp) {
        let points = resp.data.point
        let lines = resp.data.vector
        _this.fabricObj.clear().renderAll()

        // 创建多边形
        let angle = 0 //角度
        let n = _this.n //顶点数
        let r = 180 //半径
        let delta = 2*Math.PI/n
        let center = _this.fabricObj.getCenter() //获取中心坐标
        for (let i = 0; i < n; i++) {
          let angleAfter = angle + delta
          let line = new fabric.Line([center.left+r*Math.sin(angle),//x1
                center.top-r*Math.cos(angle),//y1
                center.left+r*Math.sin(angleAfter),//x2
                center.top-r*Math.cos(angleAfter)],//y2
              {
                strokeWidth:2, //笔触大小
                stroke:'#000000', //笔触颜色
                // perPixelTargetFind:true, //默认false。当设置为true，对象的检测会以像互点为基础，而不是以边界的盒模型为基础。
                lockMovementX: true,//X轴是否可被移动(true为不可，因为前缀是lock)
                lockMovementY: true,//Y轴是否可被移动(true为不可，因为前缀是lock)
                lockRotation: true, //禁止旋转
                lockScalingX: true, //禁止水平缩放
                lockScalingY: true, // 禁止垂直缩放
                hasControls: false, // 取消选中时的点
              })
          let circle = new fabric.Circle({
            radius:_this.r,
            fill:'blue',
            left:center.left+r*Math.sin(angle)-_this.r,
            top:center.top-r*Math.cos(angle)-_this.r,
            lockMovementX: true,//X轴是否可被移动(true为不可，因为前缀是lock)
            lockMovementY: true,//Y轴是否可被移动(true为不可，因为前缀是lock)
            lockRotation: true, //禁止旋转
            lockScalingX: true, //禁止水平缩放
            lockScalingY: true, // 禁止垂直缩放
            hasControls: false, // 取消选中时的点
          })
          let text = new fabric.Textbox(points[i], {
            left:center.left+r*Math.sin(angle),
            top:center.top-r*Math.cos(angle),
            originX:'center',
            originY:'bottom',
            fontSize:23,
            lockMovementX: true,//X轴是否可被移动(true为不可，因为前缀是lock)
            lockMovementY: true,//Y轴是否可被移动(true为不可，因为前缀是lock)
            lockRotation: true, //禁止旋转
            lockScalingX: true, //禁止水平缩放
            lockScalingY: true, // 禁止垂直缩放
            hasControls: false, // 取消选中时的点
          })
          let lineText = new fabric.Textbox(lines[i], {
            left:(center.left+r*Math.sin(angle)+center.left+r*Math.sin(angleAfter))/2,
            top:(center.top-r*Math.cos(angle)+center.top-r*Math.cos(angleAfter))/2,
            originX:'center',
            originY:'bottom',
            fontSize:23,

            lockMovementX: true,//X轴是否可被移动(true为不可，因为前缀是lock)
            lockMovementY: true,//Y轴是否可被移动(true为不可，因为前缀是lock)
            lockRotation: true, //禁止旋转
            lockScalingX: true, //禁止水平缩放
            lockScalingY: true, // 禁止垂直缩放
            hasControls: false, // 取消选中时的点
          })

          // 要注意这里讲图形与文本作为一个组合在一起，所以后面处理的时候也是一个组
          // 因此要编辑文本时应该用item(1)方法拿出text，1是因为这里的text刚好是第二个
          let circleGroup = new fabric.Group([circle, text], {
            lockMovementX: true,//X轴是否可被移动(true为不可，因为前缀是lock)
            lockMovementY: true,//Y轴是否可被移动(true为不可，因为前缀是lock)
            lockRotation: true, //禁止旋转
            lockScalingX: true, //禁止水平缩放
            lockScalingY: true, // 禁止垂直缩放
            hasControls: false, // 取消选中时的点
            selectable:false,
          })

          let lineGroup = new fabric.Group([line, lineText], {
            lockMovementX: true,//X轴是否可被移动(true为不可，因为前缀是lock)
            lockMovementY: true,//Y轴是否可被移动(true为不可，因为前缀是lock)
            lockRotation: true, //禁止旋转
            lockScalingX: true, //禁止水平缩放
            lockScalingY: true, // 禁止垂直缩放
            hasControls: false, // 取消选中时的点
          })
          _this.fabricObj.add(lineGroup)
          _this.fabricObj.add(circleGroup)
          angle = angleAfter
        }
        _this.getAllData()
        _this.save()
      })
    },
    createPolygon() {
      this.fabricObj.clear().renderAll()
      // 创建多边形
      let angle = 0 //角度
      let n = this.n //顶点数
      let r = 180 //半径
      let delta = 2*Math.PI/n
      let center = this.fabricObj.getCenter() //获取中心坐标
      for (let i = 0; i < n; i++) {
        let angleAfter = angle + delta
        let line = new fabric.Line([center.left+r*Math.sin(angle),//x1
          center.top-r*Math.cos(angle),//y1
          center.left+r*Math.sin(angleAfter),//x2
          center.top-r*Math.cos(angleAfter)],//y2
            {
          strokeWidth:2, //笔触大小
          stroke:'#000000', //笔触颜色
          // perPixelTargetFind:true, //默认false。当设置为true，对象的检测会以像互点为基础，而不是以边界的盒模型为基础。
          lockMovementX: true,//X轴是否可被移动(true为不可，因为前缀是lock)
          lockMovementY: true,//Y轴是否可被移动(true为不可，因为前缀是lock)
          lockRotation: true, //禁止旋转
          lockScalingX: true, //禁止水平缩放
          lockScalingY: true, // 禁止垂直缩放
          hasControls: false, // 取消选中时的点
        })
        let circle = new fabric.Circle({
          radius:this.r,
          fill:'blue',
          left:center.left+r*Math.sin(angle)-this.r,
          top:center.top-r*Math.cos(angle)-this.r,
          lockMovementX: true,//X轴是否可被移动(true为不可，因为前缀是lock)
          lockMovementY: true,//Y轴是否可被移动(true为不可，因为前缀是lock)
          lockRotation: true, //禁止旋转
          lockScalingX: true, //禁止水平缩放
          lockScalingY: true, // 禁止垂直缩放
          hasControls: false, // 取消选中时的点
        })
        let text = new fabric.Textbox('双击输入参数', {
          left:center.left+r*Math.sin(angle),
          top:center.top-r*Math.cos(angle),
          originX:'center',
          originY:'bottom',
          fontSize:10,
          lockMovementX: true,//X轴是否可被移动(true为不可，因为前缀是lock)
          lockMovementY: true,//Y轴是否可被移动(true为不可，因为前缀是lock)
          lockRotation: true, //禁止旋转
          lockScalingX: true, //禁止水平缩放
          lockScalingY: true, // 禁止垂直缩放
          hasControls: false, // 取消选中时的点
        })
        let lineText = new fabric.Textbox('双击输入运算符', {
          left:(center.left+r*Math.sin(angle)+center.left+r*Math.sin(angleAfter))/2,
          top:(center.top-r*Math.cos(angle)+center.top-r*Math.cos(angleAfter))/2,
          originX:'center',
          originY:'bottom',
          fontSize:10,

          lockMovementX: true,//X轴是否可被移动(true为不可，因为前缀是lock)
          lockMovementY: true,//Y轴是否可被移动(true为不可，因为前缀是lock)
          lockRotation: true, //禁止旋转
          lockScalingX: true, //禁止水平缩放
          lockScalingY: true, // 禁止垂直缩放
          hasControls: false, // 取消选中时的点
        })

        // 要注意这里讲图形与文本作为一个组合在一起，所以后面处理的时候也是一个组
        // 因此要编辑文本时应该用item(1)方法拿出text，1是因为这里的text刚好是第二个
        let circleGroup = new fabric.Group([circle, text], {
          lockMovementX: true,//X轴是否可被移动(true为不可，因为前缀是lock)
          lockMovementY: true,//Y轴是否可被移动(true为不可，因为前缀是lock)
          lockRotation: true, //禁止旋转
          lockScalingX: true, //禁止水平缩放
          lockScalingY: true, // 禁止垂直缩放
          hasControls: false, // 取消选中时的点
          selectable:false,
        })

        let lineGroup = new fabric.Group([line, lineText], {
          lockMovementX: true,//X轴是否可被移动(true为不可，因为前缀是lock)
          lockMovementY: true,//Y轴是否可被移动(true为不可，因为前缀是lock)
          lockRotation: true, //禁止旋转
          lockScalingX: true, //禁止水平缩放
          lockScalingY: true, // 禁止垂直缩放
          hasControls: false, // 取消选中时的点
        })
        this.fabricObj.add(lineGroup)
        this.fabricObj.add(circleGroup)
        angle = angleAfter
      }
      this.getAllData()
      this.save()
    },
    dbClick(item) {
      // 双击触发事件
      let tb = item.item(1)
      this.fabricObj.setActiveObject(tb)
      tb.enterEditing() //进入编辑状态

    },
    textEditing(e) {
      const numReg = /^-?\d+$/;
      const numRe = new RegExp(numReg);
      // 进入编辑事件
      if (e.text === '双击输入参数' || e.text === '双击输入运算符' || numRe.test(e.text) || e.text === '+' || e.text === '*') {
        if (e.text === '双击输入运算符' || e.text === '+' || e.text === '*') {
          this.type = 1  // 1表示运算符
        } else {
          this.type = 0  // 0表示参数
        }
        this.textTemp = e.text
        e.selectAll()
        e.set({
          text:'',
          fontSize:23,
          width:e.fontSize/2
        })
      }
    },
    textExit(e) {
      // 结束编辑事件
      const _this = this
      const numReg = /^-?\d+$/;
      const numRe = new RegExp(numReg);
      if (this.type === 0) {
        if (!numRe.test(e.text)) {
          Toast.fail('应该输入整数')
          e.set({
            text:_this.textTemp
          })
          return;
        }
      }
      if (this.type === 1){ // 应该输入运算符
        if(e.text !== '+' && e.text !== '*'){
          Toast.fail('应该输入运算符+或者*')
          e.set({
            text:_this.textTemp
          })
          return;
        }
      }
      this.fabricObj.discardActiveObject()
      this.getAllData()
      this.save()
    },
    textChange(e) {
      // 内容修改，也就是正在编辑触发事件
      e.set({
        width:e.width - e.fontSize/2,// 这里修改文本框的宽度是因为不知道为什么不修改的话显示的文本会不更新
      })
    },
    getAllData() {
      // 获取所有的数据
      let objects = this.fabricObj.getObjects()
      let lArr = []
      let pArr = []
      let lid = 1
      objects.forEach(function (object, index, array) {
        if (object.item(1).text === '+' || object.item(1).text === '*') {
          let temp = {id:'',x1:'',y1:'',x2:'',y2:'', text:''}
          temp.x1 = object.item(0).x1
          temp.x2 = object.item(0).x2
          temp.y1 = object.item(0).y1
          temp.y2 = object.item(0).y2
          temp.text = object.item(1).text
          temp.id = lid
          lid++
          lArr.push(temp)
        } else {
          let temp = {left:'',top:'', text:''}
          temp.left = object.item(0).left
          temp.top = object.item(0).top
          temp.text = object.item(1).text
          pArr.push(temp)
        }
      })
      this.lineArr = lArr
      this.pointArr = pArr
    },
    handleTools(tools, idx) {
      this.initIdx = idx
      this.currentTool = tools.name
      switch (tools.name) {
        case 'eraser': //删除方法
          this.eraser()
          break;
        case 'redo':  //重做方法
          this.redo()
          break;
        case 'undo':  //撤销方法
          this.undo()
          break;
      }
    },
    eraser() {
      const _this = this
      _this.fabricObj.off('mouse:dblclick')
      let selectObject = this.fabricObj.getActiveObject()
      let objects = this.fabricObj.getObjects()
      let obs = []
      let id = 0
      objects.forEach(function (object){
        if (object.item(1).text === '+' || object.item(1).text === '*' ) {
          obs.push(object)
        }
      })
      if (obs.includes(selectObject)) {
        id = obs.indexOf(selectObject)
      }
      let length = objects.length
      if (length === 2 * this.n) {
        this.lineArr.forEach(function (object, index) {
          if (object.text!=='null' && object.x1 === selectObject.item(0).x1 && object.x2 === selectObject.item(0).x2) {
            _this.isSelect = 1
            _this.lineArr[index].text = 'null'
            _this.fabricObj.fxRemove(selectObject, {
              onChange() {

              },
              onComplete() {
                _this.save()
              }
            })
          }
        })
        if (_this.isSelect === 0) {
          _this.validation(id)
        } else {
          _this.isSelect = 0
        }
      } else {
        let temp = 0
        this.lineArr.forEach(function (object, index) {
          if (object.text!=='null' && object.x1 === selectObject.item(0).x1 && object.x2 === selectObject.item(0).x2) {
            _this.isSelect = 1
            if (object.text === '+'){
              if (index + 1 < _this.lineArr.length) {
                temp = Number(_this.pointArr[index].text) + Number(_this.pointArr[index + 1].text)
              }
              else {
                temp = Number(_this.pointArr[index].text) + Number(_this.pointArr[0].text)
              }
            }
            if (object.text === '*'){
              if (index + 1 < _this.lineArr.length) {
                temp = Number(_this.pointArr[index].text) * Number(_this.pointArr[index + 1].text)
              }
              else {
                temp = Number(_this.pointArr[index].text) * Number(_this.pointArr[0].text)
              }
            }

            if (index + 1 < _this.lineArr.length) {
              _this.pointArr[index].text = temp + ''
              _this.pointArr.splice(index+1, 1)
            } else {
              _this.pointArr[0].text = temp + ''
              _this.pointArr.splice(index, 1)
            }
            _this.lineArr.splice(index, 1)
          }
        })
        if (_this.isSelect === 0) {
          _this.validation(id)
        } else {
          _this.fabricObj.clear().renderAll()
          _this.polygon()
          _this.save()
          _this.isSelect = 0
        }
      }
    },
    validation(id) {
      const _this = this
      _this.fabricObj.clear().renderAll()
      _this.polygon()
      let objects = _this.fabricObj.getObjects()
      let obs = []
      objects.forEach(function (object,index){
        if (object.item(1).text === '+' || object.item(1).text === '*' ) {
          obs.push(index)
        }
      })
      _this.fabricObj.setActiveObject(objects[obs[id]])
      _this.eraser()
    },
    dynamicValidation() {
      const _this = this
    },
    delete(array) {
      const _this = this
      _this.fabricObj.off('mouse:dblclick')
      _this.fabricObj.clear().renderAll()
      _this.polygon()
      for (let i = 0; i < array.length - 1; i++) {
        setTimeout(() => {
          let length = _this.fabricObj.getObjects().length
          if (length === 2 * _this.n) {
            this.lineArr.forEach(function (object, index) {
              if (object.text!=='null' && object.id+'' === array[i]) {
                _this.lineArr[index].text = 'null'
                let objects = _this.fabricObj.getObjects()
                for (let j = 0; j < objects.length; j++) {
                  if (object.x1 === objects[j].item(0).x1 && object.x2 === objects[j].item(0).x2) {
                    _this.fabricObj.fxRemove(objects[j], {
                      onChange() {

                      },
                      onComplete() {
                        _this.save()
                      }
                    })
                  }
                }
              }
            })
        } else {
          let temp = 0
          this.lineArr.forEach(function (object, index) {
            if (object.text!=='null' && object.id+'' === array[i]) {
              if (object.text === '+'){
                if (index + 1 < _this.lineArr.length) {
                  temp = Number(_this.pointArr[index].text) + Number(_this.pointArr[index + 1].text)
                }
                else {
                  temp = Number(_this.pointArr[index].text) + Number(_this.pointArr[0].text)
                }

              }
              if (object.text === '*'){
                if (index + 1 < _this.lineArr.length) {
                  temp = Number(_this.pointArr[index].text) * Number(_this.pointArr[index + 1].text)
                }
                else {
                  temp = Number(_this.pointArr[index].text) * Number(_this.pointArr[0].text)
                }

              }

              if (index + 1 < _this.lineArr.length) {
                _this.pointArr[index].text = temp + ''
                _this.pointArr.splice(index+1, 1)
              } else {
                _this.pointArr[0].text = temp + ''
                _this.pointArr.splice(index, 1)
              }
              _this.lineArr.splice(index, 1)

            }
          })
          _this.fabricObj.clear().renderAll()
          _this.polygon()
          _this.save()
          _this.isSelect = 0
        }
      }, 1500*i)
    }
  },
  polygon() {
    // 创建多边形
    const _this = this
    let angle = 0 //角度
    let n = this.pointArr.length //顶点数
    let r = 180 //半径
    let delta = 2*Math.PI/n
    let center = this.fabricObj.getCenter() //获取中心坐标
    for (let i = 0; i < n; i++) {
      let angleAfter = angle + delta
      if (_this.lineArr[i].text !== 'null') {
        let line = new fabric.Line([center.left+r*Math.sin(angle),//x1
                center.top-r*Math.cos(angle),//y1
                center.left+r*Math.sin(angleAfter),//x2
                center.top-r*Math.cos(angleAfter)],//y2
              {
                strokeWidth:2, //笔触大小
                stroke:'#000000', //笔触颜色
                // perPixelTargetFind:true, //默认false。当设置为true，对象的检测会以像互点为基础，而不是以边界的盒模型为基础。
                lockMovementX: true,//X轴是否可被移动(true为不可，因为前缀是lock)
                lockMovementY: true,//Y轴是否可被移动(true为不可，因为前缀是lock)
                lockRotation: true, //禁止旋转
                lockScalingX: true, //禁止水平缩放
                lockScalingY: true, // 禁止垂直缩放
                hasControls: false, // 取消选中时的点
              })
          _this.lineArr[i].x1 = line.x1
          _this.lineArr[i].x2 = line.x2
          _this.lineArr[i].y1 = line.y1
          _this.lineArr[i].y2 = line.y2
          let lineText = new fabric.Textbox(_this.lineArr[i].text, {
            left:(center.left+r*Math.sin(angle)+center.left+r*Math.sin(angleAfter))/2,
            top:(center.top-r*Math.cos(angle)+center.top-r*Math.cos(angleAfter))/2,
            originX:'center',
            originY:'bottom',
            fontSize:23,

            lockMovementX: true,//X轴是否可被移动(true为不可，因为前缀是lock)
            lockMovementY: true,//Y轴是否可被移动(true为不可，因为前缀是lock)
            lockRotation: true, //禁止旋转
            lockScalingX: true, //禁止水平缩放
            lockScalingY: true, // 禁止垂直缩放
            hasControls: false, // 取消选中时的点
          })

          let lineGroup = new fabric.Group([line, lineText], {
            lockMovementX: true,//X轴是否可被移动(true为不可，因为前缀是lock)
            lockMovementY: true,//Y轴是否可被移动(true为不可，因为前缀是lock)
            lockRotation: true, //禁止旋转
            lockScalingX: true, //禁止水平缩放
            lockScalingY: true, // 禁止垂直缩放
            hasControls: false, // 取消选中时的点
          })

          this.fabricObj.add(lineGroup)
        }

        let circle = new fabric.Circle({
          radius:this.r,
          fill:'blue',
          left:center.left+r*Math.sin(angle)-this.r,
          top:center.top-r*Math.cos(angle)-this.r,
          lockMovementX: true,//X轴是否可被移动(true为不可，因为前缀是lock)
          lockMovementY: true,//Y轴是否可被移动(true为不可，因为前缀是lock)
          lockRotation: true, //禁止旋转
          lockScalingX: true, //禁止水平缩放
          lockScalingY: true, // 禁止垂直缩放
          hasControls: false, // 取消选中时的点
        })
        _this.pointArr[i].left = circle.left
        _this.pointArr[i].top = circle.top
        let text = new fabric.Textbox(_this.pointArr[i].text, {
          left:center.left+r*Math.sin(angle),
          top:center.top-r*Math.cos(angle),
          originX:'center',
          originY:'bottom',
          fontSize:23,
          lockMovementX: true,//X轴是否可被移动(true为不可，因为前缀是lock)
          lockMovementY: true,//Y轴是否可被移动(true为不可，因为前缀是lock)
          lockRotation: true, //禁止旋转
          lockScalingX: true, //禁止水平缩放
          lockScalingY: true, // 禁止垂直缩放
          hasControls: false, // 取消选中时的点
        })

        let circleGroup = new fabric.Group([circle, text], {
          lockMovementX: true,//X轴是否可被移动(true为不可，因为前缀是lock)
          lockMovementY: true,//Y轴是否可被移动(true为不可，因为前缀是lock)
          lockRotation: true, //禁止旋转
          lockScalingX: true, //禁止水平缩放
          lockScalingY: true, // 禁止垂直缩放
          hasControls: false, // 取消选中时的点
          selectable:false,
        })
        this.fabricObj.add(circleGroup)
        angle = angleAfter
      }

    },

    save() {
      let delList = [...this.state.deleteOperateList]
      let saveList = [...this.state.saveOperateList]
      let operindex = this.state.operIndex
      const json = this.fabricObj.toJSON()
      const _this = this
      if (this.state.delLen > 0) {
        delList.some(item => {
        saveList[item].del = true;
        _this.lineArrList[item].del = true;
        _this.pointArrList[item].del = true
        })
        saveList = saveList.filter(item => {
        return !item.del;
        })
        _this.lineArrList = _this.lineArrList.filter(item => {
          return !item.del
        })
        _this.pointArrList = _this.pointArrList.filter(item => {
          return !item.del
        })
        delList = []
        saveList.push(json)
        _this.lineArrList.push(JSON.parse(JSON.stringify(_this.lineArr)))
        _this.pointArrList.push(JSON.parse(JSON.stringify(_this.pointArr)))
        operindex = saveList.length - 1
      } else {
        saveList.push(json)
        _this.lineArrList.push(JSON.parse(JSON.stringify(_this.lineArr)))
        _this.pointArrList.push(JSON.parse(JSON.stringify(_this.pointArr)))
        operindex += 1
      }
      // console.log("operindex",operindex)
      // console.log("pointArrList",this.pointArrList)
      // console.log("saveList", saveList)
      // console.log("pointArr",_this.pointArr)
      this.state.saveOperateList = saveList
      this.state.deleteOperateList = delList
      this.state.delLen = delList.length
      this.state.saveLen = saveList.length
      this.state.operIndex = operindex
    },
    undo() {
      let delList = [...this.state.deleteOperateList]
      let saveList = [...this.state.saveOperateList]
      let operindex = this.state.operIndex
      if (operindex > 0) {
        this.fabricObj.clear()
        this.fabricObj.loadFromJSON(saveList[operindex - 1],this.fabricObj.renderAll.bind(this.fabricObj))
        this.lineArr = JSON.parse(JSON.stringify(this.lineArrList[operindex -1]))
        this.pointArr = JSON.parse(JSON.stringify(this.pointArrList[operindex -1]))
        if (delList.includes(operindex - 1)) {
        } else {
          delList.push(operindex)
          operindex -= 1
        }
      }
      // console.log("operindex",operindex)
      // console.log("pointlineArrList",this.pointArrList)
      // console.log("saveList", saveList)
      // console.log("pointArr",this.pointArr)
      this.state.saveOperateList = saveList
      this.state.deleteOperateList = delList
      this.state.delLen = delList.length
      this.state.saveLen = saveList.length
      this.state.operIndex = operindex
    },
    redo() {
      let delList = [...this.state.deleteOperateList]
      let saveList = [...this.state.saveOperateList]
      let operindex = this.state.operIndex
      if(operindex + 1 >= saveList.length) {

      } else {
        this.fabricObj.loadFromJSON(saveList[operindex + 1]).renderAll()
        this.lineArr = JSON.parse(JSON.stringify(this.lineArrList[operindex +1]))
        this.pointArr = JSON.parse(JSON.stringify(this.pointArrList[operindex +1]))
        if (delList.includes(operindex + 1)) {
          const index = delList.indexOf(operindex + 1)
          delList.splice(index, 1)
        } else {
        }
        operindex = operindex + 1

        // console.log("operindex",operindex)
        // console.log("pointArrList",this.pointArrList)
        // console.log("saveList", saveList)
        // console.log("pointArr",this.pointArr)
        this.state.saveOperateList = saveList
        this.state.deleteOperateList = delList
        this.state.delLen = delList.length
        this.state.saveLen = saveList.length
        this.state.operIndex = operindex
      }
    },

  }
}
</script>

<style>
  .canvas-wrapper {
    background: url("../assets/001.jpg");
    height: 500px;
    position: relative;
    top: 80px;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: #ebedf0 0 4px 12px;
  }
  .container-right{
    position: absolute;
    top: 180px;
    z-index: 1;
    width: 280px;
    min-width: 280px;
    box-sizing: border-box;
    overflow: hidden;
    background: white;
    border-radius: 12px;
    box-shadow: #ebedf0 0 4px 12px;
    right: 20px;
    height: 250px;
  }
  .slider{
    top: 50px;
    left: 15px;
  }
  .slider-button {
    width: 26px;
    color: #fff;
    font-size: 10px;
    line-height: 18px;
    text-align: center;
    background-color: #ee0a24;
    border-radius: 100px;
  }
  .right-text {
    position: relative;
    top: 30px;
    left: 13px;
    font-size: 20px;
    color:	#A0A0A0
  }
  .right-radio {
    position: relative;
    top: 100px;
    left: 40px;
  }
  .right-button {
    position: relative;
    top: 120px;
    left: 30px;
  }
</style>